import type { ECharts } from 'echarts'

interface EChartsType extends ECharts {
  __resizeTimer: ReturnType<typeof setInterval>
}

const INIT_MAP: Map<EChartsType, boolean> = new Map()

/**
 * 安装图表自适应大小的监听器
 *
 * @param el - ECharts 容器元素
 * @param myChart - ECharts 实例（扩展了 __resizeTimer）
 * @param resizeFn - 可选回调函数，每次 resize 后执行
 *
 * @example
 * ```ts
 * const chart = echarts.init(document.getElementById('chart')!)
 * installChartResize(document.getElementById('chart')!, chart, () => {
 *   console.log('chart resized!')
 * })
 * ```
 */
export const useBarScroll = (el: HTMLElement, myChart: EChartsType, resizeFn?: () => void) => {
  // 初始化时记录实例，标记为尚未 resize 过
  INIT_MAP.set(myChart, false)

  // 创建 ResizeObserver，监听容器大小变化
  const resizeObserver = new ResizeObserver((entries) => {
    // 先清除上一次的定时器，避免频繁触发 resize
    clearTimeout(myChart.__resizeTimer)

    // 延时 200ms 再执行 resize，减少抖动
    myChart.__resizeTimer = setTimeout(() => {
      // 第二次及以后才会执行 resize（第一次触发时只标记）
      if (INIT_MAP.get(myChart)) {
        myChart.resize({
          animation: { duration: 300 }, // 添加平滑过渡动画
        })
        // 如果提供了额外的 resize 回调，执行它
        if (resizeFn) {
          resizeFn()
        }
      }
      // 第一次触发后，将状态改为 true，之后才会执行 resize
      INIT_MAP.set(myChart, true)
    }, 200)
  })

  // 开始监听容器元素
  resizeObserver.observe(el)

  // 保存 ECharts 原始 dispose 方法
  const originalDispose = myChart.dispose

  // 重写 dispose：清理 observer，避免内存泄漏
  myChart.dispose = () => {
    resizeObserver.disconnect()
    originalDispose.call(myChart)
  }
}
